import React from 'react';
import { Modal, InputNumber, Form } from 'antd';
import { defaultFormItemLayout } from '../../../components/modalForm';
import { minRule } from '../../../utils';

const FormItem = Form.Item;
const createForm = Form.create;

export default createForm()((props) => {
    const { form, event = {}, dispatch } = props;
    const { editBase, base: { id, val1, val2 } = {} } = event;
    const { getFieldDecorator: fd, validateFields: vf } = form;
    const requiredRule = {
        required: true,
        message: '必填项',
    };
    const numberRule = {
        type: 'number',
        message: '请输入数字',
    };
    if (id) {
        fd('id', {
            initialValue: id,
            rules: [requiredRule],
        });
    }
    const time = fd('val1', {
        initialValue: parseInt(val1, 10) || null,
        rules: [
            requiredRule,
            numberRule,
            minRule(1),
        ],
    });
    const money = fd('val2', {
        initialValue: parseInt(val2, 10) || null,
        rules: [
            requiredRule,
            numberRule,
            minRule(),
        ],
    });
    const onOk = () => {
        vf((err, values) => {
            if (!err) {
                dispatch({
                    type: 'event/editBaseData',
                    values,
                });
            }
        });
    };
    const onCancel = () => {
        dispatch({
            type: 'event/setState',
            payload: {
                editBase: false,
            },
        });
    };

    /* const onRemove = (id) => {
        dispatch({
            type: 'event/removeBaseData',
            id,
        });
    }; */

    return (
        <Modal
            onOk={onOk}
            onCancel={onCancel}
            okText="提交"
            cancelText="取消"
            visible={editBase}
            title={`${!id ? '添加' : '更新'}基础收费规则`}
            closable
        >
            <Form>
                <FormItem
                    label="单价(元)"
                    {...defaultFormItemLayout}
                >
                    {money(
                        <InputNumber
                            style={{ width: 200 }}
                            placeholder="请输入金额"
                        />
                    )}
                </FormItem>
                <FormItem
                    label="单次时长(分钟)"
                    {...defaultFormItemLayout}
                >
                    {time(
                        <InputNumber
                            style={{ width: 200 }}
                            placeholder="请输入时间"
                        />
                    )}
                </FormItem>
            </Form>
            {/* {id ? <a onClick={onRemove.bind(null, id)}>删除当前计费规则</a> : null} */}
        </Modal>
    );
});
